<template>
  <div class="app-container">
    <div v-if="fleetDataDivShow">
      <div style="background-color: white; border-radius: 10px; height: 100px;margin-left: 10px;text-align: center;padding-top: 30px">
        <!-- 多条件分页查询所需条件的form -->
        <el-form :inline="true"  :model="fleetDto" class="demo-form-inline">
          <el-form-item label="车队名称">
            <el-input ref="inputRef" v-model="fleetDto.name" placeholder="请输入车队名称"></el-input>
          </el-form-item>
          <el-form-item label="负责人">
            <el-input ref="inputRef2" v-model="fleetDto.manager" placeholder="请输入负责人"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="query">查询</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="resetValues">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <!-- end -->

      <div style="background-color: white;margin-top: 10px; margin-bottom: 20px;margin-left: 10px;border-radius: 10px;">

        <!-- 添加车辆按钮 -->
        <el-button type="primary" @click="dataOperation(0,'add')" style="margin-left: 30px;margin-top: 30px">+新增车队</el-button>
        <!-- end -->

        <div style="height: 20px"></div>

        <!-- table 用于展示项目建议信息 -->
        <el-table
          v-if="fleetShow"
          v-loading="fleetlistLoading"
          :data="fleetlist"
          style="width: 96%;margin-left: 32px"
          :max-height="620"
          :row-style="{ height: '55px' }"
        >
          <el-table-column fixed label="车队编号" header-align="center" align="center">
            <template slot-scope="scope">
              {{ scope.row.id }}
            </template>
          </el-table-column>
          <el-table-column label="车队名称" header-align="center" align="center">
            <template slot-scope="scope">
              {{ scope.row.name }}
            </template>
          </el-table-column>
<!--          <el-table-column label="所属机构" header-align="center" align="center">-->
<!--            <template slot-scope="scope">-->
<!--              {{ scope.row.cname }}-->
<!--            </template>-->
<!--          </el-table-column>-->
          <el-table-column prop="name" label="负责人" header-align="center" align="center">
            <template slot-scope="scope">
              {{ scope.row.manager }}
            </template>
          </el-table-column>
          <el-table-column prop="age" label="联系电话" header-align="center" align="center">
            <template slot-scope="scope">
              {{ scope.row.contract_number }}
            </template>
          </el-table-column>
          <el-table-column prop="price" label="车辆数量" header-align="center" align="center">
            <template slot-scope="scope">
              {{ scope.row.truck_number }}
            </template>
          </el-table-column>
          <el-table-column prop="price" label="车辆操作" header-align="center" align="center">
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="dataOperation(scope.row.id,'truck')">查看车辆列表</el-button>
            </template>
          </el-table-column>
          <el-table-column prop="type" label="司机数量" header-align="center" align="center">
            <template slot-scope="scope">
              {{ scope.row.driver_number }}
            </template>
          </el-table-column>
          <el-table-column prop="price" label="司机操作" header-align="center" align="center">
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="dataOperation(scope.row.id,'driver')">查看司机列表</el-button>
            </template>
          </el-table-column>
          <el-table-column prop="attention" label="状态" header-align="center" align="center">
            <template slot-scope="scope">
              {{ scope.row.status === 1 ? "正常":"禁用"}}
            </template>
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="120" header-align="center" align="center">
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="dataOperation(0,'location')">车辆实时位置</el-button>
              <el-button type="text" size="small" @click="dataOperation(scope.row.id,'update')">编辑</el-button>
              <el-button @click.native.prevent="open(scope.row.id)" type="text" size="small">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- end --->

        <div style="height: 50px;margin-bottom: 10px">

          <!-- 分页组件 -->
          <el-pagination
            background
            @current-change="change"
            @size-change="pageSizeChange"
            :current-page="fleetPageNumber"
            :page-sizes="[10, 20, 40, 80]"
            :total="fleetTotal"
            layout="total, prev, pager, next, sizes,jumper"
            style="text-align: center; font-size: 8px; margin-top: 15px"
          >
          </el-pagination>
          <!-- end -->
        </div>

      </div> <!-- 间隔 -->

      <!-- 抽屉 -->
      <el-drawer
        :title="title"
        :visible.sync="drawer"
        size="70%"
        direction="ttb"
        ref="drawer"
        :before-close="handleClose"
        style="position: fixed; top: 60%; left: 52%; transform: translate(-50%, -50%); width: 65%; max-width: 1300px;height: 800px;border-radius: 10px;"
      >

        <div style="margin-left: 70px" v-if="fleetDivShow">
          <el-form ref="form" :model="form" label-width="80px">
            <el-row>
              <el-col :span="12">
                <el-form-item label="车队名称" style="width: 285px" label-width="100px">
                  <el-input type="text" v-model="form.name" style="width: 205px"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="车队管理员" label-width="100px">
                  <el-select v-model="form.manager" style="width: 205px">
                    <el-option v-for="item in fleetManager" :key="item.id" :label="item.name" :value="item.id.toString()"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="12">
                <el-form-item label="状态" label-width="100px">
                  <el-select v-model="form.status" style="width: 205px">
                    <el-option label="请选择" :value="''"></el-option>
                    <el-option label="正常" :value="1"></el-option>
                    <el-option label="禁用" :value="0"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>

          </el-form>
        </div>
        <div v-if="selectShow">
          <div v-if="truckShow">
            <el-form  :inline="true" class="demo-form-inline" style="margin-left: 30px">
              <el-form-item label="车牌号">
                <el-input ref="inputRef" v-model="license_plate" placeholder="请输入车队名称"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="getTruckByFleetId(0)">查询</el-button>
              </el-form-item>
            </el-form>
            <!-- table 用于展示项目建议信息 -->
            <el-table
              v-if="truckLoad"
              v-loading="trucklistLoading"
              :data="trucklist"
              :max-height="800"
              :row-style="{ height: '55px' }"
            >
              <el-table-column fixed label="车辆编号" header-align="center" align="center">
                <template slot-scope="scope">
                  {{ scope.row.id }}
                </template>
              </el-table-column>
              <el-table-column label="品牌" header-align="center" align="center">
                <template slot-scope="scope">
                  {{ scope.row.brand }}
                </template>
              </el-table-column>
              <el-table-column label="车牌号码" header-align="center" align="center">
                <template slot-scope="scope">
                  {{ scope.row.license_plate }}
                </template>
              </el-table-column>
              <el-table-column prop="name" label="车辆类型" header-align="center" align="center">
                <template slot-scope="scope">
                  {{ scope.row.tname }}
                </template>
              </el-table-column>
              <el-table-column prop="age" label="GPS设备ID" header-align="center" align="center">
                <template slot-scope="scope">
                  {{ scope.row.device_gps_id }}
                </template>
              </el-table-column>
              <el-table-column prop="price" label="准载重量(千克)" header-align="center" align="center">
                <template slot-scope="scope">
                  {{ scope.row.allowable_load }}
                </template>
              </el-table-column>
              <el-table-column prop="type" label="准载体积(方)" header-align="center" align="center">
                <template slot-scope="scope">
                  {{ scope.row.allowable_volume }}
                </template>
              </el-table-column>
              <el-table-column prop="attention" label="过期状态" header-align="center" align="center">
                <template slot-scope="scope">
                  {{ scope.row.status === 1 ? "正常":"已过期"}}
                </template>
              </el-table-column>
              <el-table-column prop="remark" label="车次编号" header-align="center" align="center">
                <template slot-scope="scope">
                  {{ scope.row.ttId }}
                </template>
              </el-table-column>
            </el-table>
            <!-- end --->

            <div style="height: 50px;margin-bottom: 10px">

              <!-- 分页组件 -->
              <el-pagination
                background
                @current-change="truckChange"
                @size-change="truckPageSizeChange"
                :current-page="truckPageNumber"
                :page-sizes="[5]"
                :total="truckTotal"
                layout="total, prev, pager, next, sizes,jumper"
                style="text-align: center; font-size: 8px; margin-top: 15px"
              >
              </el-pagination>
              <!-- end -->
            </div>

          </div>
          <div v-if="driverShow">
            <el-form  :inline="true" class="demo-form-inline" style="margin-left: 30px">
              <el-form-item label="司机名称">
                <el-input ref="inputRef" v-model="driverName" placeholder="请输入车队名称"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="getDriverByFleetId(0)">查询</el-button>
              </el-form-item>
            </el-form>
            <!-- table 用于展示项目建议信息 -->
            <el-table
              v-if="driverLoad"
              v-loading="driverlistLoading"
              :data="driverlist"
              :max-height="800"
              :row-style="{ height: '55px' }"
            >
              <el-table-column fixed label="司机编号" header-align="center" align="center">
                <template slot-scope="scope">
                  {{ scope.row.id }}
                </template>
              </el-table-column>
              <el-table-column label="司机名称" header-align="center" align="center">
                <template slot-scope="scope">
                  {{ scope.row.name }}
                </template>
              </el-table-column>
              <el-table-column label="年龄" header-align="center" align="center">
                <template slot-scope="scope">
                  {{ scope.row.age }}
                </template>
              </el-table-column>
              <el-table-column prop="name" label="驾龄" header-align="center" align="center">
                <template slot-scope="scope">
                  {{ scope.row.driver_age }}
                </template>
              </el-table-column>
              <el-table-column prop="age" label="运输任务编号" header-align="center" align="center">
                <template slot-scope="scope">
                  {{ scope.row.task_transport_id }}
                </template>
              </el-table-column>
            </el-table>
            <!-- end --->

            <div style="height: 50px;margin-bottom: 10px">

              <!-- 分页组件 -->
              <el-pagination
                background
                @current-change="driverChange"
                @size-change="driverPageSizeChange"
                :current-page="driverPageNumber"
                :page-sizes="[5]"
                :total="driverTotal"
                layout="total, prev, pager, next, sizes,jumper"
                style="text-align: center; font-size: 8px; margin-top: 15px"
              >
              </el-pagination>
              <!-- end -->
            </div>
          </div>
        </div>
        <div style="position: absolute; bottom: 30px; right: 40px;" v-if="buttonShow">
          <el-button type="primary" @click="agree(logo)">确认</el-button>
          <el-button>取消</el-button>
        </div>
      </el-drawer>
      <!-- end -->
    </div >
    <div v-if="truckLocationShow"><TruckLocation/></div>
  </div>

</template>

<script>
import {deleteFleetById, queryAllFleetByPage, queryFleetById,addFleet,updateFleet,queryTruckByFleetId,getFleetManagerByFleetId,queryDriverByFleetId } from '@/api/fleet/fleet_manage'
import user from '@//store/modules/user'
import TruckLocation from '@/views/truck/truck_location.vue'

export default {
  components: {
    TruckLocation,
  },
  data(){
    return {
      truckLocationShow:false,
      fleetDataDivShow:true,
      driverName:null,
      buttonShow:true,
      truckLoad:true,
      trucklistLoading: false,
      selectedValue: '',
      logo: 'add',
      selectShow:true,
      driverShow:false,
      truckShow:false,
      fleetShow:true,
      fleetDivShow:false,
      form: {
        id:null,
        name:null,
        fleet_number:null,
        agency_id:null,
        manager:null,
        status:null
      },
      title:'添加车队消息',
      drawer: false,
      fleetDto:{
        name:null,
        manager:null
      },
      fleetlist: null,
      fleetlistLoading: true,
      fleetPageNumber: 1,
      fleetPageSize: 10,
      fleetTotal: 0,
      trucklist:[],
      driver:[],
      userId:0,
      fleetManager:[],
      truckTotal:0,
      truckPageNumber: 1,
      truckPageSize: 5,
      driverTotal:0,
      driverPageNumber: 1,
      driverPageSize: 5,
      driverlist:[],
      driverlistLoading: false,
      driverLoad:true,
      license_plate:null,
      fleet_id:null
    }
  },
  created() {
    this.userId = user.state.id
    this.init()
    this.queryFleetManager(this.userId)
  },
  methods:{
    //多条件分页查询
    query(){
      this.fleetPageNumber = 1;
      this.init()
    },
    //初始化
    init(){
      this.fleetlistLoading = true

      const fleetDto = {
        pageNum: this.fleetPageNumber,
        pageSize: this.fleetPageSize,
        name: this.fleetDto.name,
        manager: this.fleetDto.manager,
        agency_id: this.userId
      }

      queryAllFleetByPage(fleetDto).then(response=>{
        this.fleetlist = response.data.list
        this.fleetlistLoading = false
        this.fleetTotal = response.data.total
        this.fleetShow = true
      })
    },
    queryFleetManager(id){
      getFleetManagerByFleetId(id).then(response=>{
        this.fleetManager = response.data.data
        console.log(response)
      })
    },
    getTruckByFleetId(id){
      if (id!==0){
        this.fleet_id = id
      }
      const truckFleetDto = {
        pageNum: this.truckPageNumber,
        pageSize: this.truckPageSize,
        id: this.fleet_id,
        license_plate: this.license_plate
      }

      queryTruckByFleetId(truckFleetDto).then(response=>{
        this.trucklist = response.data.list
        this.trucklistLoading = false
        this.truckTotal = response.data.total
      })
    },
    //重置分页查询条件
    resetValues() {
      this.$refs.inputRef.clear(); // 清空输入框的值
      this.$refs.inputRef2.clear();
    },
    //分页
    change(val){
      this.fleetPageNumber = val;
      this.init();
    },
    truckChange(val){
      this.truckPageNumber = val;
      this.getTruckByFleetId(0)
    },
    driverChange(val){
      this.driverPageNumber = val;

      this.getDriverByFleetId(0)
    },
    //分页查询
    pageSizeChange(newPageSize) {
      this.fleetPageSize = newPageSize;

      this.init()
    },
    truckPageSizeChange(newPageSize) {
      this.truckPageSize = newPageSize;
      this.getTruckByFleetId(0)
    },
    driverPageSizeChange(PageSize) {
      this.driverPageSize = PageSize;
      this.getDriverByFleetId(0)
    },
    //详细信息的修改
    dataOperation(id,logo) {
      if (logo === 'add') {
        this.selectShow = false
        this.buttonShow = true
        this.fleetDivShow = true
        this.title = '添加车队消息'
        this.logo = 'add'
        this.drawer = true
      }else if (logo === 'update') {
        this.selectShow = false
        this.buttonShow = true
        this.fleetDivShow = true
        this.queryFleetById(id)
        this.title = '修改车队消息'
        this.logo = 'update'
        this.drawer = true
      }else if (logo === 'truck') {
        this.buttonShow = false
        this.fleetDivShow = false
        this.getTruckByFleetId(id)
        this.title = '车辆列表'
        this.truckShow = true
        this.selectShow = true
        this.driverShow = false
        this.drawer = true
      }else if (logo === 'driver') {
        this.getDriverByFleetId(id)
        this.buttonShow = false
        this.fleetDivShow = false
        this.title = '司机列表'
        this.driverShow = true
        this.selectShow = true
        this.truckShow = false
        this.drawer = true
      }else{
        this.fleetDataDivShow = false
        this.truckLocationShow = true
      }
    },
    getDriverByFleetId(id){
      if (id!==0){
        this.fleet_id = id
      }
      const truckDriverDto = {
        pageNum: this.driverPageNumber,
        pageSize: this.driverPageSize,
        id: this.fleet_id,
        name: this.driverName
      }

      console.log(truckDriverDto)

      queryDriverByFleetId(truckDriverDto).then(response=>{
        this.driverlist = response.list
        this.driverlistLoading = false
        this.driverTotal = response.total
      })
    },
  queryFleetById(id){
    queryFleetById(id).then(response=>{
      this.form = response.data
    })
  },
    //添加车辆信息
    agree(logo){
      if (logo === 'add') {
        this.saveFleet()
      }else {
        this.modifyFleet()
      }
    },
    saveFleet(){
      this.form.agency_id = this.userId
      addFleet(this.form).then(response=>{
        if (response.code === "200") {
          this.init()
          this.$message({
            message: response.message,
            type: 'success'
          });
          this.drawer = false
          this.form= {
            id:null,
            name:null,
            fleet_number:null,
            agency_id:null,
            manager:null,
            status:null
          }
        } else {
          this.$message.error(response.message);
        }
      })
    },
    modifyFleet(){
      this.form.agency_id = this.userId
      updateFleet(this.form).then(response=>{
        this.init()
        if (response.code === "200") {
          this.$message({
            message: response.message,
            type: 'success'
          });
          this.drawer = false
          this.form= {
            id:null,
            name:null,
            fleet_number:null,
            agency_id:null,
            manager:null,
            status:null
          }
        } else {
          this.$message.error(response.message);
        }
      })
    },
    //关闭模态框
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          this.form= {
            id:null,
            name:null,
            fleet_number:null,
            agency_id:null,
            manager:null,
            status:null
          }
          done();
        })
        .catch(_ => {});
    },
    //删除车辆信息(其实就是修改车辆状态)
    excise(id){
      deleteFleetById(id).then(response=>{
        this.$message(response.message)
        this.init()
      })
    },
    //删除信息的弹出框
    open(id) {
      const h = this.$createElement;
      this.$msgbox({
        title: '消息',
        message: h('p', null, [
          h('span', null, '你确定要删除此车辆吗? '),
        ]),
        showCancelButton: true,
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        beforeClose: (action, instance, done) => {
          if (action === 'confirm') {
            this.excise(id)
            done()
          } else {
            done();
          }
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
.app-container{
  width: 100%;
  height: 908px;
  background-color: #f1f1f1; /* 设置背景颜色 */
}
.linkStyle{
  font-size: 14px;
  margin: 10px 0;
  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
}
.container {
  display: flex;
  align-items: center;
}

.title {
  margin-left: 50px;
  margin-top: 30px;
  margin-right: 20px; /* 调整按钮与标题之间的间距 */
  color: black;
}

.close-button {
  margin-left: 900px; /* 将按钮推到最左边 */
}
.el-form-item .el-form-item__label {
  width: auto; /* 自适应宽度 */
  white-space: nowrap; /* 不换行 */
}

.avatar-uploader .el-upload {
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
  border: 1px dashed #99a9bf;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
